<template>
    <div class="meeting-detail-page">
        <el-card shadow="never" v-loading="loading">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="120px"
                ref="form"
                :rules="rules">
                <el-form-item label="会议名称" prop="name">
                    <el-input
                        v-model="form.name"
                        placeholder="请输入会议名称"
                        class="input-width"
                    ></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="introduction">
                    <el-input
                        v-model="form.introduction"
                        placeholder="请输入简介"
                        class="input-width"
                    ></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="describe">
                    <div class="flex">
                        <el-input
                            maxlength="220"
                            v-model="form.describe"
                            placeholder="请输入描述"
                            class="input-width"
                            type="textarea"
                            rows="4"
                            show-word-limit
                        ></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="颜色" prop="color">
                    <div class="flex items-center">
                        <el-color-picker medium v-model="form.color"/>
                        <label class="ml-2 text-sm text-gray-600">为会议配置一个颜色</label>
                    </div>
                </el-form-item>
                <el-form-item label="图片" prop="image">
                    <file-upload
                        :type="1"
                        :multiple="false"
                        v-model="form.image">
                        <img
                            v-if="form.image"
                            :src="form.image"
                            class="uploader-icon picture image-uploader"
                        />
                        <i v-else class="el-icon-plus uploader-icon picture image-uploader"></i>
                    </file-upload>
                </el-form-item>
                <el-form-item label="关联学习路径" required></el-form-item>
                <!-- <GroupTemplate class="group" v-model="chooseData" /> -->
                <div>
                    <div
                        :class="{'selection_active': form.label_id === item.id}"
                        class="selection cursor-pointer"
                        v-for="item in labelList"
                        :key="item.id"
                        @click="onLabelSelect(item)">
                        <div class="item-title flex-wrap">
                            <div class="bg">
                                {{ item.name ? item.name : '单个学习主题' }}
                            </div>
                        </div>
                        <div class="sum">
                            可选工作场景主题 {{ item.count }} 个
                            <i v-if="item.describe" class="line"></i>
                            {{ item.describe }}
                        </div>
                    </div>
                </div>
            </el-form>
            <div class="text-center" >
                <el-button :loading="loading" type="primary" @click="onSave">保 存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import FileUpload from '@/components/base/FileUpload';
// import GroupTemplate from '@/views/Label/Group/GroupTemplate';

export default {
    components: {
        FileUpload,
        // GroupTemplate,
    },
    data() {
        return {
            loading: false,
            form: {
                name: '',
                describe: '',
                image: '',
                color: '#000',
                label_id: '',
                introduction: '',
            },
            params: {
                page: 1,
                size: 50,
                type: 3, // 专题 ： 3
            },
            id: this.$route.params.id,
            rules: {
                name: [
                    { required: true, message: '会议名称不能为空', trigger: 'blur' },
                ],
                introduction: [
                    { required: true, message: '会议简介不能为空', trigger: 'blur' },
                ],
                describe: [
                    { required: true, message: '会议描述不能为空', trigger: 'blur' },
                ],
                image: [
                    { required: true, message: '请为会议配置一张修饰图', trigger: 'blur' },
                ],
                color: [
                    { required: true, message: '请为会议配置一个颜色', trigger: 'blur' },
                ],
            },

            // chooseData: [],
            labelList: [],
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;

                let url = 'meeting';
                let method = 'post';
                if (this.id) {
                    url = `${url}/${this.id}`;
                    method = 'put';
                    this.form.id = this.id;
                }

                // if (!this.chooseData || !this.chooseData.length) return $ele.$message.warning('请选择主题');
                // this.form.course_ids = this.chooseData.map(item => item.id);

                if (!this.form.label_id) return $ele.$message.warning('请选择学习路径');

                this.loading = true;
                API[method](url, this.form).then(() => {
                    $ele.$message.success(this.id ? '编辑成功' : '新增成功');
                    this.$router.back();
                }).finally(() => this.loading = false);
            });
        },
        fetchData() {
            if (this.id) {
                this.loading = true;
                API.get(`meeting/${this.id}`).then((res) => {
                    for (const i of Object.keys(this.form)) {
                        if (res[i] || res[i] === 0) this.form[i] = res[i];
                    }
                    if (this.form.type) this.form.type_list = JSON.parse(this.form.type);

                    // if (!res.course_ids || !res.course_ids.length) return;
                    // for (const item of res.course_ids) {
                    //     this.chooseData.push({id: item});
                    // }
                    this.form.label_id = res.label_id;
                }).finally(() => this.loading = false);
            }
        },

        fetchLabel() {
            this.loading = true;
            API.get('label', {
                params: this.params,
            }).then(e => {
                this.labelList = e.content;
            }).finally(() => this.loading = false);
        },

        onLabelSelect(e) {
            this.form.label_id = e.id;
        },
    },
    mounted() {
        this.fetchData();
        this.fetchLabel();
    },
};
</script>

<style lang="scss" scoped>
.input-width {
    max-width: 400px;
}

.picture {
    width: 200px;
    height: 200px;
    line-height: 200px;
}
.uploader-icon {
    font-size: 20px;
    color: #8c939d;
    text-align: center;
}
.image-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.selection {
    position: relative;
    padding: 24px 50px 20px 60px;
    box-sizing: border-box;
    box-shadow: 0 0 4px 1px #dddfe6;
    margin: 10px 0;
    margin: 0 auto 20px auto;
    transition: all .3s;
    border-radius: 4px;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: attr(img);
    }

    &.selection_active {
        background: #409eff;

        .item-title, .sum {
            color: white;
        }

        .line {
            border-color: white;
        }
    }

    .item-title {
        font-size: 22px;
        margin-bottom: 15px;
        color: #606266;
        margin-right: 26px;
    }

    .line {
        width: 100px;
        display: inline-block;
        margin: 0 4px 3px 4px;
        border-top: 2px solid #cecdcd;
    }

    .sum {
        font-size: 14px;
        color: #b0b4bc;
    }
}
</style>
